import React, { useState, } from 'react';
import { Form, Input, Button, Radio, Space, Card, Divider, Typography } from 'antd';
import { FolderOpenOutlined } from '@ant-design/icons';

const { Title, Text } = Typography;

const Backupset: React.FC = () => {
  const [form] = Form.useForm();
  const [selectedPath, setSelectedPath] = useState<string>('');
  const [packEnabled, setPackEnabled] = useState<boolean>(false);
  const [compressEnabled, setCompressEnabled] = useState<boolean>(false);
  const [encryptEnabled, setEncryptEnabled] = useState<boolean>(false);

  // 路径选择
  const handleSelectPath = () => {
    const demoPath = '/home/user/documents';
    setSelectedPath(demoPath);
    form.setFieldsValue({ path: demoPath });
  };


  // 表单提交
  const handleSubmit = () => {
    form.validateFields()
  };

  return (
    <div style={{ margin: 'auto' }}>
      <Card style={{ backgroundColor: '#fffffff5', boxShadow: '0 4px 12px 4px rgba(0, 0, 0, 0.28)' }} title={<Title level={3}>备份配置</Title>} bordered={true}>
        <Form
          form={form}
          layout="vertical"
          initialValues={{
            path: '',
            pack: false,
            packAlgorithm: 'custom',
            compress: false,
            compressAlgorithm: 'haff',
            encrypt: false,
            encryptAlgorithm: 'aes'
          }}
        >

          {/* 路径选择 */}
          <Form.Item
            name="path"
            label={<Text strong>文件路径</Text>}
            rules={[{ required: true, message: '请选择路径' }]}
          >
            <Space.Compact style={{ width: '100%' }}>
              <Input
                value={selectedPath}
                placeholder="请选择路径"
                readOnly
                style={{ flex: 1 }}
              />
              <Button
                type="primary"
                icon={<FolderOpenOutlined />}
                onClick={handleSelectPath}
              >
                选择路径
              </Button>
            </Space.Compact>
          </Form.Item>

          <Divider />

          {/* 打包配置 */}
          <Form.Item name="pack" label={<Text strong>打包</Text>}>
            <Radio.Group
              onChange={e => setPackEnabled(e.target.value)}
              value={packEnabled}
            >
              <Radio value={true}>打包</Radio>
              <Radio value={false}>不打包</Radio>
            </Radio.Group>
          </Form.Item>

          <Form.Item
            name="packAlgorithm"
            label="打包算法"
            rules={[{ required: packEnabled, message: '请选择打包算法' }]}
            dependencies={['pack']}
          >
            <Radio.Group disabled={!packEnabled}>
              <Radio value="custom">自定义</Radio>
              <Radio value="tar">tar</Radio>
            </Radio.Group>
          </Form.Item>

          <Divider />

          {/* 压缩配置区域 */}
          <Form.Item name="compress" label={<Text strong>压缩</Text>}>
            <Radio.Group
              onChange={e => setCompressEnabled(e.target.value)}
              value={compressEnabled}
            >
              <Radio value={true}>压缩</Radio>
              <Radio value={false}>不压缩</Radio>
            </Radio.Group>
          </Form.Item>

          <Form.Item
            name="compressAlgorithm"
            label="压缩算法"
            rules={[{ required: compressEnabled, message: '请选择压缩算法' }]}
            dependencies={['compress']}
          >
            <Radio.Group disabled={!compressEnabled}>
              <Radio value="haff">Haff</Radio>
              <Radio value="lz77">LZ77</Radio>
            </Radio.Group>
          </Form.Item>

          <Divider />

          {/* 加密配置区域 */}
          <Form.Item name="encrypt" label={<Text strong>加密</Text>}>
            <Radio.Group
              onChange={e => setEncryptEnabled(e.target.value)}
              value={encryptEnabled}
            >
              <Radio value={true}>加密</Radio>
              <Radio value={false}>不加密</Radio>
            </Radio.Group>
          </Form.Item>

          <Form.Item
            name="encryptAlgorithm"
            label="加密算法"
            rules={[{ required: encryptEnabled, message: '请选择加密算法' }]}
            dependencies={['encrypt']}
          >
            <Radio.Group disabled={!encryptEnabled}>
              <Radio value="aes">AES</Radio>
              <Radio value="des">DES</Radio>
            </Radio.Group>
          </Form.Item>

          {/* 备份按钮 */}
          <Form.Item>
            <Space style={{ width: '100%', justifyContent: 'space-between' }}>
              <Button
                type="primary"
                onClick={handleSubmit}
              >
                开始备份
              </Button>
            </Space>
          </Form.Item>
        </Form>
      </Card>
    </div>
  );
};

export default Backupset;